<template>
    <div>
        <div class="order_choose">
            <div class="order_choose-list" @click="swichNav(index,item.id)" v-for="(item,index) in tags" :key="item.id">
                <span :class="[currentTab==index ? 'order_choose_title' : 'order_choose_title_no']">{{item.name}}</span>
                <span :class="[currentTab==index ? 'order_choose_subtitle' : 'order_choose_no_subtitle']">{{item.memo}}</span>
            </div>
        </div>
        <div class="product_bottom_content">
            <div v-if="products.length!=0">
                <column v-for="(item,index) in products" :key="index" :product="item" :concise="concise" v-if="index%2==0"></column>
            </div>
            <div v-if="products.length!=0">
                <column v-for="(item,index) in products" :key="index" :product="item" :concise="concise" v-if="index%2!=0"></column>
            </div>
            <noData v-if="products.length===0" style="height: 100%"></noData>
        </div>
    </div>
</template>

<script>
import noData from "./components/noData";
import { mapGetters } from "vuex";
import column from "./components/column";
import { productList } from "@/api/product";
import { list as tagList } from "../../../../api/wxTag";
import utils from "../../../../utils/utils";

export default {
    name: "products",
    data() {
        return {
            tagIds: [],
            tagId: "",
            pageSize: 2,
            pageNum: 1,
            tags: [],
            products: [],
            winWidth: 0,
            winHeight: 0,
            currentTab: 0,
            concise:true,
        };
    },

    computed: {
        ...mapGetters(["mchId"]),
    },
    props: ["content"],
    methods: {
        loadTag() {
            var _this = this;
            if (!utils.isNull(this.content.tagids)) {
                this.tagIds = this.content.tagids.split(",");
                for (var i = 0; i < this.tagIds.length; i++) {
                    this.tagIds[i] = parseInt(this.tagIds[i]);
                }
            }
            let params = new URLSearchParams();
            params.append("pageSize", 5);
            params.append("pageNum", this.pageNum);
            params.append("type", "3");
            params.append("tagIds", this.tagIds);
            params.append("mchId", this.mchId);
            tagList(params).then((res) => {
                if (res.data.data.length > 0) {
                    _this.tags = res.data.data;
                    _this.tagId = res.data.data[0].id;
                }
                _this.loadProduct();
            });
        },
        swichNav(index, id) {
            if (this.currentTab === index) {
                return false;
            } else {
                this.currentTab = index;
                this.tagId = id;
            }
            setTimeout(() => {
                this.loadProduct();
            }, 500);
        },
        bindChange(e) {
            this.currentTab = e;
        },
        loadProduct() {
            this.pageSize = this.content.rows;
            let params = new URLSearchParams();
            params.append("tagIds", this.tagId);
            params.append("mchId", this.mchId);
            params.append("pageSize", this.pageSize);
            params.append("pageNum", this.pageNum);
            productList(params).then((response) => {
                response.data.data.forEach((item) => {
                    if (utils.isNull(item.thumbnail)) {
                        item.thumbnail =
                            "http://cdnx.hulu.fj.cn/00/4B/rBD_P13d876ATFO4AAT07C99LBw961.jpg";
                    }
                });
                this.products = response.data.data;
            });
        },
    },
    created() {
        this.loadTag();
    },
    components: {
        column,
        noData,
    },
};
</script>

<style scoped>
page {
    background-color: rgba(248, 248, 248, 0.8);
}

.order_choose {
    width: 100%;
    text-align: center;
    /* line-height: 80px; */
    padding-left: 13px;
    padding-right: 13px;
    box-sizing: border-box;
    display: flex;
    /* height: 76px; */
    margin-top: 10px;
    overflow: hidden;
}

.order_choose-list {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.order_choose_title_no {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    display: block;
    line-height: 1;
    padding-bottom: 14px;
    width: 75px;
}

.order_choose_title {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 400;
    color: rgba(215, 38, 28, 1);
    display: block;
    line-height: 1;
    padding-bottom: 12.5px;
    width: 75px;
}

.swiper-box {
    display: block;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.swiper-box view {
    text-align: center;
}

.order_choose_line {
    width: 24.5px;
    height: 5px;

    border-radius: 1px;
}

.order_choose_line_no {
    background: linear-gradient(
        0deg,
        rgba(231, 91, 83, 1),
        rgba(246, 171, 171, 1)
    );
}

.column_box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
}

.order_choose_subtitle {
    font-size: 11px;
    display: block;
    width: 54px;
    height: 20px;
    background: red;
    border-radius: 15px;
    color: white;
    text-align: center;
    line-height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.order_choose_no_subtitle {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.5);
    width: 54px;
    height: 20px;
    border-radius: 15px;
    text-align: center;
    line-height: 20px;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.product_bottom_content {
    display: flex;
    flex-direction: row;
    /*margin-top: 10px;/*/
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
}
</style>
